<template>
  <div class="box-full bgfff box-border round-4 m-relative overflow-hidden">
    <div class="m-absolute t-0 b-0 r-0 l-0 overflow-hidden">
      <a-scrollbar style="height: 100%; width: 100%; overflow-y: auto">
        <a-form :model="form" layout="horizontal" auto-label-width class="p-20">
          <a-form-item field="interval" label="消息间隔时间">
            <a-input-number
              style="width: 100px"
              v-model="form.interval"
              :formatter="intervalFormatter"
              :parser="intervalParser"
              :step="0.1"
              :precision="0.1"
              :min="0.1"
              :max="5"
            />
            <template #extra>
              <span
                >文字消息的间隔时间，至少0.1秒，图片和表情会自动在此基础上加1.2秒，视频自动在此基础上增加2.5秒，如发现文案图片顺序错乱，可调大此值</span
              >
            </template>
          </a-form-item>
          <a-form-item field="filterWord" label="关键词过滤">
            <div class="w-full">
              <a-card
                :style="{
                  minHeight: '200px',
                  width: '100%',
                  borderRadius: '4px',
                  marginBottom: '10px'
                }"
              >
                <div class="flex flex-wrap">
                  <a-tag
                    v-for="(item, index) in form.filterWord"
                    :key="index"
                    closable
                    class="m-2"
                    @close="form.filterWord.splice(index, 1)"
                    >{{ item }}</a-tag
                  >
                </div>
              </a-card>
              <div class="mb-10 flex flex-a-c">
                <span class="mr-10">遇到含有过滤词的文案直接过滤掉这条文案</span>
                <a-switch v-model="form.filterWhole" />
              </div>
              <a-space>
                <a-input
                  size="small"
                  placeholder="输入后按 Enter 键添加"
                  v-model="filterWord"
                  @pressEnter="handleFilterWordAdd"
                ></a-input>
                <a-button
                  size="small"
                  type="primary"
                  status="warning"
                  @click="handleFilterWordReset"
                >
                  <template #icon>
                    <icon-undo />
                  </template>
                  <template #default>重置为官方默认屏蔽词</template>
                </a-button>
                <a-button
                  size="small"
                  type="primary"
                  status="danger"
                  @click="() => (form.filterWord = [])"
                >
                  <template #icon>
                    <icon-delete />
                  </template>
                  <template #default>清空</template>
                </a-button>
              </a-space>
            </div>
          </a-form-item>
          <!-- <a-form-item field="interval" label="文案自定义">
            <div class="pt-4">
              <a-space class="mb-10">
                <span>在链接/口令文案的</span>
                <a-radio-group v-model="form.customCopy.position" :options="customCopyOptions">
                  <template #label="{ data }">
                    <a-tag>{{ data.label }}</a-tag>
                  </template>
                </a-radio-group>
                <span>插入</span>
              </a-space>
              <a-textarea
                v-model="form.customCopy.text"
                placeholder="输入需要插入的文字"
                allow-clear
              />
            </div>
          </a-form-item> -->
          <a-form-item field="replaceWord" label="关键词替换">
            <div class="w-full flex-col replaceWord">
              <a-card class="mb-10" v-for="(item, index) in form.replaceWord" :key="index">
                <a-space wrap>
                  <a-button
                    :disabled="form.replaceWord.length == 1"
                    type="primary"
                    shape="circle"
                    @click="form.replaceWord.splice(index, 1)"
                  >
                    <icon-delete />
                  </a-button>
                  <a-input
                    style="width: 150px"
                    placeholder="关键词"
                    v-model="form.replaceWord[index].keyword"
                  ></a-input>
                  <icon-arrow-right />
                  <template v-for="(item2, index2) in item.words" :key="index2">
                    <span v-if="index2 > 0">或</span>
                    <a-button
                      :disabled="form.replaceWord[index].words.length == 1"
                      size="mini"
                      type="primary"
                      shape="circle"
                      @click="form.replaceWord[index].words.splice(index2, 1)"
                    >
                      <icon-delete />
                    </a-button>
                    <a-input
                      style="width: 140px"
                      placeholder="替换词"
                      v-model="form.replaceWord[index].words[index2]"
                    ></a-input>
                  </template>
                  <a-button
                    size="mini"
                    type="primary"
                    shape="circle"
                    @click="handleReplaceWordAdd(index)"
                  >
                    <icon-plus />
                  </a-button>
                </a-space>
              </a-card>
              <a-space class="mt-10">
                <a-button size="small" type="primary" @click="handleKeyWordAdd(index)">
                  <template #icon>
                    <icon-plus />
                  </template>
                  <template #default>新增</template>
                </a-button>
              </a-space>
            </div>
            <template #extra>
              <span>
                一个关键词的替换词添加多个时将随机被替换为其中一个，只填写关键词未填写替换词和只填写替换词未填写关键词都将被忽略
              </span>
            </template>
          </a-form-item>
          <a-form-item field="filterPic" label="过滤商品图片">
            <a-switch v-model="form.filterPic" />
          </a-form-item>
          <a-form-item field="filterEmoji" label="过滤表情图片">
            <a-switch v-model="form.filterEmoji" />
          </a-form-item>
        </a-form>
        <div class="w-full h-30n"></div>
      </a-scrollbar>
    </div>
    <div class="w-full h-16n m-absolute l-0 b-0 r-0 flex flex-center bgfff foote">
      <div class="w-full m-absolute r-10 b-70 bgfff w-fit">
        <a-alert class="w-fit" type="warning">所有修改的设置在点击底部保存之前都不会生效</a-alert>
      </div>
      <a-space>
        <a-button @click="resetForm">重置</a-button>
        <a-button type="primary" @click="handleSave">保存设置</a-button>
      </a-space>
    </div>
  </div>
</template>
<script setup>
import { Message } from '@arco-design/web-vue'
import { IconUndo, IconDelete, IconPlus, IconArrowRight } from '@arco-design/web-vue/es/icon'
import axios from 'axios'
const { ipcRenderer } = window.electron
const userInfo = ref()
const filterWord = ref()
const form = reactive({
  interval: 0.1,
  filterWord: [],
  replaceWord: [
    {
      keyword: '',
      words: ['']
    }
  ],
  customCopy: {
    position: 'start',
    text: ''
  },
  filterPic: false,
  filterEmoji: false,
  filterWhole: false
})

;(async function () {
  userInfo.value = await ipcRenderer.invoke('storeGet', 'userInfo')
})()

// 重置关键词
const handleFilterWordReset = async () => {
  const configKeywordData = await axios.post(
    'http://saas-pc-gateway.corpvip.top:8789/getSourceChatroomConfigKeyword',
    { openId: userInfo.value?.openId }
  )
  form.filterWord = configKeywordData?.data?.data?.list ?? []
}

// 格式化间隔输入框，加入秒字
const intervalFormatter = (value) => {
  return `${value}秒`
}
// 格式化间隔输入框，去除秒字
const intervalParser = (value) => {
  return value.replace(/秒/g, '')
}

// 添加过滤词
const handleFilterWordAdd = (e) => {
  if (e.target.value) {
    form.filterWord.push(e.target.value)
    filterWord.value = ''
  }
}

// 添加替换词
const handleReplaceWordAdd = (index) => {
  form.replaceWord[index].words.push('')
}

// 添加替换词的关键词
const handleKeyWordAdd = (index) => {
  form.replaceWord.push({
    keyword: '',
    words: ['']
  })
}

// 保存设置
const handleSave = () => {
  const result = JSON.parse(JSON.stringify(form))
  window.ipcRenderer.invoke('storeSet', 'optionGroupSetting', result)
  ipcRenderer.send('getSetting', {
    data: result,
    type: 'optionGroupSetting'
  })
  Message.success('保存成功，跟群设置已生效')
}

//进入页面后获取缓存的配置
onMounted(async () => {
  const res = await window.ipcRenderer.invoke('storeGet', 'optionGroupSetting')
  if (res) {
    Object.assign(form, res)
  }
})

// 重置设置
const resetForm = async () => {
  const res = await window.ipcRenderer.invoke('storeGet', 'optionGroupSetting')
  if (res) {
    Object.assign(form, res)
  } else {
    Object.assign(form, {
      interval: 0.1,
      filterWord: [],
      replaceWord: [
        {
          keyword: '',
          words: ['']
        }
      ],
      customCopy: {
        position: 'start',
        text: ''
      }
    })
  }
  Message.success('跟群设置已重置')
}

defineExpose({ form, resetForm })
</script>
<style scoped lang="scss">
.arco-scrollbar {
  height: 100%;
}
.replaceWord {
  .arco-card-body {
    padding: 8px 8px 0;
  }
}
.foote {
  border-top: 1px solid #f9f9f9; /* 上部边框 */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 上部阴影 */
}
</style>
